<template>
	<view class="index" id="index">
		<!-- tab切换 -->
		<view class="tab">
			<view class="tab-box" v-for="(tabItem, index) in tab" :key="tabItem.id" @click="bindTab(tabItem.id)">
				<text class="tab-text" :class="{ 'tab-active': type == tabItem.id }">{{ tabItem.name }}</text>
				<icon class="icon-live" v-if="tabItem.id == 5"></icon>
			</view>
		</view>
		<!-- <image style="width:20px;height:20px" src="https://nabercat.oss-cn-hangzhou.aliyuncs.com/acat-xcx/BrowserPreview_tmp.gif" mode=""></image> -->
		<!-- 直播列表 -->
		<LiveList v-if="type == 5" :list="list" @liveTab="liveTab" @search="bindConfirm" ref="LiveList"
			:zhibonum="zhibonum"></LiveList>
		<block v-if="type != 5">
			<!-- 搜素 -->
			<view class="search-box">
				<input type="text" placeholder="🔍 搜素关键词" placeholder-style="color:#989898" v-model="keywords"
					confirm-type="search" @confirm="bindConfirm" />
			</view>
			<!-- 邻家的猫下面的tab -->
			<view class="purchase" v-if="type == 4">
				<view class="purchase-item" v-for="(item, index) in purchaseType" :key="item.id"
					:class="{ 'purchase-item-active': index == purchaseIndex }" @click="bindPurchase(index, item.name)">
					{{ item.name }}
				</view>
			</view>
			<!-- 相亲下面的tab -->
			<view class="purchase" v-if="type == 2">
				<view class="purchase-item" v-for="(item, index) in purchaseType" :key="item.id"
					:class="{ 'purchase-item-active': index == purchaseIndex }" v-if="index != 1 && index != 3"
					@click="bindPurchase(index)">
					{{ item.name }}
				</view>
			</view>
			<!-- 排行榜 -->
			<view class="ranking" v-if="activityMessage.status && (type == 1 || type == 3)">
				<view class="ranking-top">
					<text
						class="ranking-time">起止时间：{{ activityMessage.start_time }}-{{ activityMessage.end_time }}</text>
					<text class="ranking-rules" @tap="openStatement">活动规则</text>
				</view>
				<view class="ranking-list">
					<view class="ranking-item" v-for="(item, i) in activityMessage.list" :key="item.id">
						<view class="ranking-image-box" @click="jumpDeatil(item.id)">
							<image :src="IMG_URL + item.img" mode="aspectFill"></image>
						</view>
						<view class="ranking-name">{{ item.activityMessage }}</view>
						<view class="ranking-like">
							<icon class="icon-like"></icon>
							<text>{{ item.like }}</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 轮播图 -->
			<view class="banner" v-if="(type == 2 || type == 4) && bannerList.length > 0">
				<swiper class="swiper" :autoplay="true" :interval="5000" :duration="500">
					<swiper-item v-for="(item, i) in bannerList" :key="item.id">
						<image :src="'https://admin.nabercat.com/Public/img/nabercat_banners/' + item.img"
							@click="jumpBanner(i, item)" mode="aspectFill" class="swiper-item"></image>
					</swiper-item>
				</swiper>
			</view>
			<!-- 分割线 -->
			<view style="width: 100%;height: 1rpx;background-color: #EFEFEF;margin-bottom: 32rpx;"
				v-if="(!activityMessage.status && (type == 1 || type == 3)) || ((type == 2 || type == 4) && bannerList.length == 0)">
			</view>
			<!-- 列表 -->
			<view class="life-list">
				<view class="life-item" v-for="(item, index) in list" :key="index" @click="jumpDeatil(item.id)">
					<!-- 用户信息 -->
					<view class="wx-message">
						<image :src="item.headimgurl ? item.headimgurl : item.headimgurl2" mode="aspectFill"
							class="wx-head"></image>
						<view class="wx-nickname">
							<view class="wx-name">{{ item.nickname ? item.nickname : item.nickname2 }}</view>
							<view>{{ item.time }}</view>
						</view>
						<button class="btn-collection" v-if="type == 2 || type == 4"
							@click.stop="xCollect(index, item.id)">+ 收藏</button>
					</view>
					<!-- 内容 -->
					<view class="life-content" v-if="type == 1">{{ item.title }}</view>
					<!-- 图片 -->
					<view class="life-img-list">
						<!-- 视频 -->
						<view class="life-img-one" v-if="item.imgs.length == 0">
							<image :src="item.cover" mode="aspectFill"></image>
						</view>
						<!-- 1 -->
						<view class="life-img-one" v-if="item.imgs.length == 1">
							<image v-for="(itemImg, iImg) in item.imgs" :key="itemImg.id"
								:src="IMG_URL + itemImg.img_url" mode="aspectFill"></image>
						</view>
						<!-- 2 -->
						<view class="life-img-tow" v-else-if="item.imgs.length == 2">
							<image v-for="(itemImg, iImg) in item.imgs" :key="itemImg.id"
								:src="IMG_URL + itemImg.img_url" mode="aspectFill"></image>
						</view>
						<!-- 3 -->
						<view class="life-img-three" v-else-if="item.imgs.length == 3">
							<image :src="IMG_URL + item.imgs[0].img_url" mode="aspectFill" class="life-img-three-left">
							</image>
							<view class="life-img-three-right">
								<image :src="IMG_URL + item.imgs[1].img_url" mode="aspectFill"
									class="life-img-three-left"></image>
								<image :src="IMG_URL + item.imgs[2].img_url" mode="aspectFill"
									class="life-img-three-left"></image>
							</view>
						</view>
					</view>
					<!-- 内容 -->
					<view class="life-content" v-if="type == 3 || ((type == 2 || type == 4) && purchaseIndex == 3)">
						{{ item.content }}
					</view>
					<!-- 名称和属性 -->
					<view class="other-mc-sx" v-if="(type == 2 || type == 4) && purchaseIndex != 3">
						<view class="life-name-tj-box">
							<view class="life-name">{{ item.name }}</view>
							<view class="life-tj" v-if="item.if_sales == 1">特价</view>
						</view>
						<view class="life-attribute">
							<view class="life-attribute-item">#{{ item.color }}</view>
							<view class="life-attribute-item">#{{ item.sex }}</view>
							<view class="life-attribute-item">#{{ item.birth }}</view>
						</view>
					</view>
					<!-- 操作 -->
					<view class="life-bottom">
						<view class="price-box" v-if="(type == 2 || type == 4) && purchaseIndex != 3">
							<view class="price">
								¥
								<text>{{ item.price }}</text>
							</view>
							<!-- <view class="original-price">600.00</view> -->
						</view>
						<view class="life-b-item">
							<!--  @click="bindComment" -->
							<icon class="icon-comment"></icon>
							<text>{{ item.comment }}</text>
						</view>
						<view class="life-b-item" @click.stop="bindLike(index, item.id)">
							<icon class="icon-like" :class="{ 'icon-like-active': item.if_like == 1 }"></icon>
							<text>{{ item.like }}</text>
						</view>
					</view>
				</view>
			</view>
		</block>
		<!-- 加载更多 -->
		<uni-load-more :status="status"></uni-load-more>
		<!-- 输入评论 -->
		<LhComment :focus="focus" @blur="bindblur" @fixComments="fixComments"></LhComment>
		<!-- 活动规则（弹出框） -->
		<uni-popup ref="popup" type="center">
			<view class="pop_statement">
				<image src="https://nabercat.oss-cn-hangzhou.aliyuncs.com/acat-xcx/naber-icon-mmly.png" mode=""
					class="state_bg"></image>
				<image src="https://nabercat.oss-cn-hangzhou.aliyuncs.com/acat-xcx/icon-mmly-close.png" mode=""
					@click="closeStatement" class="state_close"></image>
				<view class="statement_title">活动规则</view>
				<scroll-view scroll-y="true" style="height: 620rpx;">
					<view class="statement_stit">活动内容</view>
					<view class="statement_text">{{ activityMessage.title }}</view>
					<view class="statement_stit">活动奖品</view>
					<view class="statement_imgs_box">
						<view class="statement_img" v-for="(item, i) in activityMessage.img" :key="i">
							<image :src="IMG_URL + item.img" mode=""></image>
							<text>{{ i + 1 }}等奖</text>
						</view>
					</view>
					<view class="statement_stit">奖品发放</view>
					<view class="statement_text">{{ activityMessage.content }}</view>
				</scroll-view>
				<view class="statement_btn_box"><button class="statement_btn" @click="closeStatement">我知道了</button>
				</view>
			</view>
		</uni-popup>
		<!-- 底部tabbar -->
		<tabbar class="tabbar" :path="'home'" @release="recordLife" />
		<view style="height: 200rpx;"></view>
		<!-- 发布 -->
		<lifePopup ref="lifePopup"></lifePopup>
		<!-- 提示去直播遮罩层 -->
		<guidePopup></guidePopup>
	</view>
</template>

<script>
	const app = getApp();
	import LhSamllTitle from '@/wxcomponents/lh-small-title/lh-small-title.vue';
	import LhComment from '@/wxcomponents/lh-comment/lh-comment.vue';
	import uniPopup from '@/components/uni-popup/uni-popup.vue'; //弹出框
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import tabbar from '@/wxcomponents/tabbar/index.vue';
	import lifePopup from '@/wxcomponents/life-popup/index.vue';
	import {
		xShare,
		activity,
		stars,
		wedding,
		lifePage,
		lifeLike,
		galike,
		clike,
		xNabercat,
		nabercatXLike,
		xBanner,
		xCollect,
		xZhibols
	} from '@/api/index.js';
	import {
		formatTimeSecond
	} from '@/util/time.js';
	import LiveList from './components/liveList.vue';
	import guidePopup from './components/guidePopup.vue';
	export default {
		data() {
			return {
				YSIMG: '?x-oss-process=image/resize,h_300,m_lfit',
				IMG_URL: app.globalData.IMG_URL,
				tab: [{
						name: '邻家的猫',
						id: '4'
					},
					{
						name: '直播',
						id: '5'
					},
					{
						name: '相亲',
						id: '2'
					},
					{
						name: '生活',
						id: '3'
					},
					{
						name: '云撸猫',
						id: '1'
					}
				],
				purchaseType: [{
						name: '最新推荐',
						id: '1'
					},
					{
						name: '领养猫咪',
						id: '2',
					},
					{
						name: '猫咪用品',
						id: '3'
					},
					// {
					// 	name: '线下选购',
					// 	id: '2'
					// },
					// {
					// 	name: '人气',
					// 	id: '3'
					// },
					{
						name: '买家秀',
						id: '4'
					}
				],
				isTab: false,
				activityMessage: {}, //排行榜信息
				bannerList: [], //轮播图
				list: [],
				isRecord: false, //记录生活
				focus: false, //输入框
				type: '4', //活动排行类型 1:云撸猫 2：相亲 3：生活 4.卖猫 5.直播
				page: 1,
				keywords: '', //关键字
				total: 1, //总页数
				status: 'more', //加载状态
				openid: '',
				purchaseIndex: 0,
				zhibonum: 0
			};
		},
		methods: {
			onSubscribe(e) {
				console.log(e);
			},
			// 切换接口
			switcHinterface: function() {
				if (this.type == 1) {
					this.stars(); //云撸猫
				} else if (this.type == 2) {
					this.wedding(); //相亲
				} else if (this.type == 3) {
					this.lifePage(); //生活
				} else if (this.type == 4) {
					this.xNabercat(); //邻家的猫
				} else if (this.type == 5) {
					this.xZhibols(); // 直播列表
				} else {}
			},

			// tab切换
			bindTab: function(type) {
				if (type == this.type) {
					return false;
				}
				this.type = type;
				this.list = [];
				this.status = 'noMore'; //加载状态
				this.page = 1;
				this.keywords = '';
				this.purchaseIndex = 0;
				if (type == 1 || type == 3) {
					this.activity();
				} else if (type == 2 || type == 4) {
					this.xBanner();
				} else {}
				this.switcHinterface();
			},

			// 搜索
			bindConfirm: function(e) {
				this.page = 1;
				this.list = [];
				this.switcHinterface();
			},

			// 评论
			bindComment: function() {
				if (!app.userIdentity()) {
					uni.navigateTo({
						url: '/pages/login/login'
					});
					return false;
				}
				this.focus = true;
			},

			// 评论-失去焦点
			bindblur: function(e) {
				this.focus = false;
				console.log(e);
			},

			// 发布评论
			fixComments: function(e) {
				console.log(e);
				uni.showToast({
					title: '评论成功',
					duration: 1500,
					icon: 'success'
				});
			},

			// 点赞 1:云撸猫 2：相亲 3：生活 4:邻家的猫
			bindLike: function(index, id) {
				if (!app.userIdentity()) {
					uni.navigateTo({
						url: '/pages/login/login'
					});
					return false;
				}
				if (this.type == 1) {
					this.galike(index, id);
				} else if (this.type == 2) {
					this.clike(index, id);
				} else if (this.type == 3) {
					this.lifeLike(index, id);
				} else {
					this.nabercatXLike(index, id);
				}
			},

			// 点击收藏
			xCollect: function(i, id) {
				if (!app.userIdentity()) {
					uni.navigateTo({
						url: '/pages/login/login'
					});
					return false;
				}
				xCollect({
					openid: this.openid,
					id: id
				}).then(res => {
					if (res == 1) {
						uni.showToast({
							title: '收藏成功',
							duration: 2000
						});
					}
				});
			},

			// 生活点赞
			lifeLike: function(i, id) {
				lifeLike({
					openid: this.openid,
					id: id
				}).then(res => {
					if (res == 1) {
						uni.showToast({
							title: '点赞成功',
							duration: 2000
						});
						this.list[i].if_like = 1;
						this.list[i].like = parseInt(this.list[i].like) + 1;
					}
				});
			},

			// 云撸猫点赞
			galike: function(i, id) {
				galike({
					openid: this.openid,
					id: id
				}).then(res => {
					if (res == 1) {
						uni.showToast({
							title: '点赞成功',
							duration: 2000
						});
						this.list[i].if_like = 1;
						this.list[i].like = parseInt(this.list[i].like) + 1;
					}
				});
			},

			// 相亲点赞
			clike: function(i, id) {
				clike({
					openid: this.openid,
					id: id
				}).then(res => {
					if (res == 1) {
						uni.showToast({
							title: '点赞成功',
							duration: 2000
						});
						this.list[i].if_like = 1;
						this.list[i].like = parseInt(this.list[i].like) + 1;
					}
				});
			},

			// 邻家的猫点赞
			nabercatXLike: function(i, id) {
				nabercatXLike({
					openid: this.openid,
					id: id
				}).then(res => {
					if (res == 1) {
						uni.showToast({
							title: '点赞成功',
							duration: 2000
						});
						this.list[i].if_like = 1;
						this.list[i].like = parseInt(this.list[i].like) + 1;
					}
				});
			},

			// 跳转详情
			jumpDeatil: function(id) {
				if (this.type == 1 || this.type == 3 || (this.type == 4 && this.purchaseIndex == 3)) {
					let t = 1;
					if (this.type == 4 && this.purchaseIndex == 3) {
						t = 2;
					}
					uni.navigateTo({
						url: `/pages/detail/detail?id=${id}&type=${this.type}&t=${t}`
					});
				} else {
					uni.navigateTo({
						url: `/pages/buyDetail/buyDetail?id=${id}&type=${this.type}`
					});
				}
			},

			// 记录生活
			recordLife: function() {
				if (!app.userIdentity()) {
					uni.navigateTo({
						url: '/pages/login/login'
					});
					return false;
				}
				this.$refs.lifePopup.isRecord = true;
			},

			// 查看活动规则
			openStatement: function() {
				this.$refs.popup.open();
			},

			// 关闭活动规格
			closeStatement: function() {
				this.$refs.popup.close();
			},

			// 活动排行接口
			activity: function() {
				let activityArr = [];
				activity({
					type: this.type
				}).then(res => {
					console.log(res);
					if (res.status) {
						activityArr.push(res.list[1]);
						activityArr.push(res.list[0]);
						activityArr.push(res.list[2]);
						res.list = activityArr;
					}
					this.activityMessage = res;
				});
			},

			// 轮播图
			xBanner: function() {
				xBanner({
					type: this.type
				}).then(res => {
					this.bannerList = res;
					console.log(res);
				});
			},

			// 云撸猫
			stars: function() {
				this.status = 'loading';
				stars({
					page: this.page,
					keywords: this.keywords,
					openid: this.openid
				}).then(res => {
					uni.stopPullDownRefresh();
					res.list.forEach(obj => {
						obj.time = formatTimeSecond(obj.time);
						obj.imgs.forEach(img => {
							img.img_url = img.img_url + this.YSIMG;
						});
					});
					this.list = this.list.concat(res.list);
					this.total = res.total;
					if (this.page == this.total || this.total == 0) {
						this.status = 'noMore';
					} else {
						this.status = 'more';
					}
				});
			},

			// 猫咪相亲
			wedding: function() {
				this.status = 'loading';
				let type = this.purchaseIndex == 0 ? 'new' : this.purchaseIndex == 1 ? 'store' : 'hot';
				wedding({
					page: this.page,
					keywords: this.keywords,
					openid: this.openid,
					type: type
				}).then(res => {
					uni.stopPullDownRefresh();
					res.list.forEach(obj => {
						obj.time = formatTimeSecond(obj.time);
					});
					this.list = this.list.concat(res.list);
					this.total = res.total;
					if (this.page == this.total || this.total == 0) {
						this.status = 'noMore';
					} else {
						this.status = 'more';
					}
				});
			},

			// 猫咪生活
			lifePage: function(type) {
				this.status = 'loading';
				lifePage({
					page: this.page,
					keywords: this.keywords,
					openid: this.openid,
					type: type ? type : 1
				}).then(res => {
					uni.stopPullDownRefresh();
					res.list.forEach(obj => {
						obj.time = formatTimeSecond(obj.time);
					});
					this.list = this.list.concat(res.list);
					this.total = res.total;
					if (this.page == this.total || this.total == 0) {
						this.status = 'noMore';
					} else {
						this.status = 'more';
					}
				});
			},

			// 邻家的猫
			xNabercat: function() {
				if (this.purchaseIndex === 3) {
					// 买家秀
					this.lifePage(2);
				} else {
					// 其他
					this.status = 'loading';
					let type = this.purchaseIndex == 0 ? 'new' : this.purchaseIndex == 1 ? 'store' : 'hot';
					xNabercat({
						page: this.page,
						keywords: this.keywords,
						openid: this.openid,
						type: type
					}).then(res => {
						uni.stopPullDownRefresh();
						res.list.forEach(obj => {
							obj.time = formatTimeSecond(obj.time);
						});
						this.list = this.list.concat(res.list);
						this.total = res.total;
						if (this.page == this.total || this.total == 0) {
							this.status = 'noMore';
						} else {
							this.status = 'more';
						}
					});
				}
			},

			// 直播列表
			async xZhibols(if_take) {
				const res = await xZhibols({
					start_time: 1,
					keywords: this.$refs.LiveList ? this.$refs.LiveList.search : '',
					page: this.page,
					if_take: this.$refs.LiveList ? this.$refs.LiveList.typeId : 1
				});
				uni.stopPullDownRefresh();
				this.list = this.list.concat(res.list);
				this.total = res.total;
				this.zhibonum = res.zhibonum;
				if (this.page == this.total || this.total == 0) {
					this.status = 'noMore';
				} else {
					this.status = 'more';
				}
			},

			// 直播tab
			liveTab(if_take) {
				this.list = [];
				this.status = 'noMore'; //加载状态
				this.page = 1;
				this.$refs.LiveList.search = '';
				this.xZhibols(if_take);
			},

			// 选购方式
			bindPurchase: function(index, name) {
				if (name === '领养猫咪') {
					wx.navigateToMiniProgram({
						appId: "wx051a0c2785654999"
					})
					return false
				}
				if (name === '猫咪用品') {
					wx.navigateToMiniProgram({
						appId: "wxb1553385bd2505f5"
					})
					return false
				}
				this.purchaseIndex = index;
				this.list = [];
				this.status = 'noMore'; //加载状态
				this.page = 1;
				this.keywords = '';
				// this.xNabercat();
				this.switcHinterface();
			},

			// 轮播图跳转
			jumpBanner: function(index, item) {
				let src = this.bannerList[index].url;
				let type = this.bannerList[index].type;
				if (type == 2) {
					uni.navigateTo({
						url: `/pages/freeToBuy/freeToBuy`
					});
				} else {
					uni.navigateTo({
						url: `/pages/webView/webView?url=${src}`
					});
				}
			},

			// 分享接口
			async xShare(openid) {
				const res = await xShare({
					type: 2,
					goods_id: 0,
					openid: openid,
					openid_in: app.globalData.openid
				});
			}
		},
		onLoad(options) {
			this.openid = uni.getStorageSync('openid');
			this.xBanner(); // 轮播图
			this.xNabercat(); //邻家的猫
			// 分享获取参数
			if (options.openid) {
				this.xShare(options.openid);
			}
		},
		onShow() {
			this.openid = uni.getStorageSync('openid');
		},

		// 上拉加载
		onReachBottom() {
			if (this.page == this.total) {
				return false;
			}
			this.page += 1;
			this.switcHinterface();
		},

		//下拉刷新
		onPullDownRefresh() {
			this.list = [];
			this.page = 1;
			this.switcHinterface();
		},

		// 分享
		onShareAppMessage() {
			return {
				title: 'nabercat-life',
				path: `/pages/index/index?openid=${app.globalData.openid}`
			};
		},

		components: {
			LhSamllTitle,
			uniPopup,
			LhComment,
			uniLoadMore,
			tabbar,
			lifePopup,
			LiveList,
			guidePopup
		}
	};
</script>

<style lang="scss" scoped>
	@mixin centerFlex {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.tab {
		padding: 14rpx 32rpx;
		color: #999999;
		font-size: 36rpx;
		font-weight: 500;
		@include centerFlex();

		.tab-box {
			display: flex;
			align-items: center;

			.icon-live {
				width: 36rpx;
				height: 36rpx;
				background: url(https://nabercat.oss-cn-hangzhou.aliyuncs.com/acat-xcx/BrowserPreview_tmp.gif) no-repeat;
				background-size: cover;
				margin-left: 8rpx;
			}

			.tab-active {
				color: #333333;
				font-size: 42rpx;
				position: relative;

				&::before {
					content: '';
					width: 60%;
					height: 8rpx;
					background: #ff774e;
					border-radius: 4rpx;
					position: absolute;
					bottom: -8rpx;
					left: 50%;
					transform: translateX(-50%);
					animation: myTab 0.2s ease-out;
				}
			}
		}

		.tab-search {
			width: 30rpx;
			height: 54rpx;
			background: url(https://nabercat.oss-cn-hangzhou.aliyuncs.com/acat-xcx/naber-index-search.png) no-repeat center center;
			background-size: 30rpx 30rpx;
		}
	}

	.search-box {
		padding: 30rpx 30rpx 20rpx 30rpx;

		&>input {
			width: 690rpx;
			height: 72rpx;
			background: #f6f6f6;
			border-radius: 36rpx;
			text-align: center;
			font-size: 28rpx;
		}
	}

	@keyframes inputWidth {
		from {
			width: 10%;
		}

		to {
			width: 100%;
		}
	}

	.purchase {
		padding: 0 30rpx 24rpx;
		display: flex;

		.purchase-item {
			width: 144rpx;
			height: 52rpx;
			line-height: 52rpx;
			text-align: center;
			background: #f8f8f8;
			border-radius: 26rpx;
			font-size: 24rpx;
			color: #141519;
			margin-right: 24rpx;
		}

		.purchase-item-active {
			background: #fa8384;
			color: #ffffff;
		}
	}

	.ranking {
		height: 577rpx;
		padding: 20rpx 0 40rpx;
		box-sizing: border-box;
		background: url(https://nabercat.oss-cn-hangzhou.aliyuncs.com/acat-xcx/naber-ranking-bg.png) no-repeat;
		background-size: cover;
		margin-bottom: 52rpx;

		.ranking-top {
			@include centerFlex();
			padding-left: 32rpx;
			margin-bottom: 48rpx;

			.ranking-time {
				font-size: 28rpx;
				color: #ffffff;
			}

			.ranking-rules {
				width: 118rpx;
				height: 44rpx;
				text-align: center;
				line-height: 44rpx;
				background: #ffffff;
				color: #ff774e;
				font-size: 24rpx;
				border-radius: 22rpx 0px 0px 22rpx;
			}
		}

		.ranking-list {
			display: flex;
			align-items: flex-end;
			justify-content: center;

			.ranking-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				color: #ffffff;

				.ranking-image-box {
					width: 210rpx;
					height: 280rpx;
					border-radius: 16rpx;
					border: 4rpx solid #ffffff;
					background-color: #ffffff;
					box-sizing: border-box;
					margin-bottom: 10rpx;
					// overflow: hidden;
					position: relative;

					&>image {
						width: 100%;
						height: 100%;
						border-radius: 16rpx;
						display: block;
					}
				}

				&:nth-of-type(2)>.ranking-image-box {
					width: 252rpx;
					height: 336rpx;
				}

				&:nth-of-type(3)>.ranking-image-box {
					width: 190rpx;
					height: 254rpx;
				}

				&>.ranking-image-box::before {
					content: '';
					position: absolute;
					width: 46rpx;
					height: 52rpx;
					top: -26rpx;
					left: 50%;
					transform: translateX(-50%);
				}

				&:nth-of-type(1)>.ranking-image-box::before {
					background: url(https://nabercat.oss-cn-hangzhou.aliyuncs.com/acat-xcx/naber-ranking-tow.png) no-repeat;
					background-size: cover;
				}

				&:nth-of-type(2)>.ranking-image-box::before {
					top: -36rpx;
					width: 64rpx;
					height: 72rpx;
					background: url(https://nabercat.oss-cn-hangzhou.aliyuncs.com/acat-xcx/naber-ranking-one.png) no-repeat;
					background-size: cover;
				}

				&:nth-of-type(3)>.ranking-image-box::before {
					background: url(https://nabercat.oss-cn-hangzhou.aliyuncs.com/acat-xcx/naber-ranking-three.png) no-repeat;
					background-size: cover;
				}

				.ranking-name {
					font-size: 28rpx;
					font-weight: 600;
					margin-bottom: 8rpx;
				}

				.ranking-like {
					display: flex;
					align-items: center;
					font-size: 24rpx;

					&>.icon-like {
						width: 22rpx;
						height: 22rpx;
						background: url(https://nabercat.oss-cn-hangzhou.aliyuncs.com/acat-xcx/naber-index-like.png) no-repeat;
						background-size: cover;
						margin-right: 6rpx;
					}
				}
			}
		}
	}

	.banner {
		width: 100%;
		height: 312rpx;
		margin: 4rpx 0 40rpx;

		.swiper {
			width: 100%;
			height: 100%;

			.swiper-item {
				width: 100%;
				height: 100%;
			}
		}
	}

	.life-list {
		.life-item {
			margin-bottom: 86rpx;

			.wx-message {
				padding: 0 28rpx;
				margin-bottom: 24rpx;
				display: flex;
				align-items: center;
				position: relative;

				.wx-head {
					width: 90rpx;
					height: 90rpx;
					border-radius: 50%;
					margin-right: 20rpx;
				}

				.wx-nickname {
					flex: 1;
					color: #999999;
					font-size: 22rpx;
					margin-bottom: 2rpx;

					&>view:nth-of-type(1) {
						color: #333333;
						font-size: 28rpx;
						font-weight: 600;
					}
				}

				.btn-collection {
					padding: 0;
					margin: 0;
					width: 138rpx;
					height: 60rpx;
					line-height: 60rpx;
					background: #fa8384;
					border-radius: 8rpx;
					font-size: 28rpx;
					color: #ffffff;
				}
			}

			.life-content {
				padding: 0 50rpx 0 28rpx;
				margin-bottom: 24rpx;
				color: #444444;
				font-size: 28rpx;
				font-weight: 500;
				line-height: 40rpx;
			}

			.life-img-list {
				width: 100%;
				margin-bottom: 24rpx;

				.life-img-one {
					width: 100%;
					height: 420rpx;

					&>image {
						width: 100%;
						height: 100%;
					}
				}

				.life-img-tow {
					height: 372rpx;
					@include centerFlex();

					&>image {
						width: 372rpx;
						height: 100%;
					}
				}

				.life-img-three {
					height: 498rpx;
					@include centerFlex();

					.life-img-three-left {
						width: 498rpx;
						height: 100%;
					}

					.life-img-three-right {
						width: 246rpx;
						height: 100%;
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						&>image {
							width: 100%;
							height: 246rpx;
						}
					}
				}
			}

			.other-mc-sx {
				padding: 0 30rpx;
				margin-bottom: 24rpx;

				.life-name-tj-box {
					display: flex;
					align-items: center;
					margin-bottom: 8rpx;

					.life-name {
						color: #444444;
						font-size: 36rpx;
						font-weight: 500;
						margin-right: 12rpx;
					}

					.life-tj {
						padding: 2rpx 16rpx;
						background: rgba(250, 131, 132, 0.2);
						color: #ff6465;
						font-size: 22rpx;
						border-radius: 8rpx;
					}
				}

				.life-attribute {
					display: flex;

					.life-attribute-item {
						height: 38rpx;
						line-height: 38rpx;
						background: #f5f5f9;
						border-radius: 19rpx;
						padding: 0 16rpx;
						color: #141519;
						font-size: 22rpx;
						margin-right: 16rpx;
					}
				}
			}

			.life-bottom {
				padding: 0 36rpx;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				color: #999999;
				font-size: 24rpx;
				position: relative;

				.price-box {
					position: absolute;
					left: 30rpx;
					top: 50%;
					transform: translateY(-50%);
					display: flex;
					align-items: center;

					.price {
						color: #f6240c;
						font-size: 32rpx;
						margin-right: 8rpx;

						&>text {
							font-size: 42rpx;
						}
					}

					.original-price {
						color: #cccccc;
						font-size: 28rpx;
						text-decoration: line-through;
					}
				}

				.life-b-item {
					margin-left: 58rpx;
					display: flex;
					align-items: center;

					&>icon {
						width: 40rpx;
						height: 40rpx;
						margin-right: 15rpx;
					}

					.icon-comment {
						background: url(https://nabercat.oss-cn-hangzhou.aliyuncs.com/acat-xcx/naber-pinglun.png) no-repeat;
						background-size: cover;
					}

					.icon-like {
						background: url(https://nabercat.oss-cn-hangzhou.aliyuncs.com/acat-xcx/naber-zandianzan.png) no-repeat;
						background-size: cover;
					}

					.icon-like-active {
						background: url(https://nabercat.oss-cn-hangzhou.aliyuncs.com/acat-xcx/naber-dz-active.png) no-repeat;
						background-size: cover;
					}
				}
			}
		}
	}

	@keyframes rotate1 {
		from {
			bottom: -800rpx;
		}

		to {
			bottom: 0;
		}
	}

	.pop_statement {
		padding: 32rpx 32rpx 36rpx;
		width: 650rpx;
		height: 900rpx;
		box-sizing: border-box;
		background: #f8f8f8;
		border-radius: 16rpx;
		position: relative;
		color: #333333;

		.statement_title {
			font-size: 42rpx;
			font-weight: 600;
			margin-bottom: 36rpx;
			text-align: center;
		}

		.statement_stit {
			margin-bottom: 8rpx;
			font-size: #333333;
			font-size: 32rpx;
			font-weight: 500;
		}

		.statement_text {
			font-size: 24rpx;
			color: #999999;
			margin-bottom: 24rpx;
		}

		.statement_imgs_box {
			display: flex;

			.statement_img {
				width: 182rpx;
				height: 182rpx;
				border-radius: 16rpx;
				border: 2rpx solid #fb6a3e;
				position: relative;
				margin-right: 20rpx;
				box-sizing: border-box;
				overflow: hidden;
				margin-bottom: 24rpx;

				&:nth-of-type(3n) {
					margin-right: 0;
				}

				&>image {
					width: 100%;
					height: 100%;
					// border-radius: 16rpx;
					display: block;
				}

				&>text {
					display: block;
					position: absolute;
					top: 0;
					left: 0;
					width: 87rpx;
					height: 32rpx;
					background: #fb6a3e;
					border-radius: 0px 0px 16rpx 0px;
					color: #ffffff;
					font-size: 22rpx;
					text-align: center;
					line-height: 32rpx;
				}
			}
		}

		.statement_btn_box {
			padding: 90rpx 32rpx 36rpx;
			box-sizing: border-box;
			background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
			border-radius: 16px;
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;

			.statement_btn {
				padding: 0;
				margin: 0;
				width: 100%;
				height: 80rpx;
				line-height: 80rpx;
				color: #ffffff;
				font-size: 36rpx;
				font-weight: 500;
				text-align: center;
				background: #ffc102;
				box-shadow: 0 3rpx 9rpx 0 rgba(252, 143, 143, 0.32);
				border-radius: 40px;
			}
		}

		.state_bg {
			width: 276rpx;
			height: 145rpx;
			position: absolute;
			left: 50rpx;
			top: -130rpx;
		}

		.state_close {
			width: 52rpx;
			height: 52rpx;
			position: absolute;
			bottom: -90rpx;
			left: 50%;
			transform: translateX(-50%);
		}
	}

	@keyframes myTab {
		from {
			width: 0;
		}

		to {
			width: 60%;
		}
	}
</style>
